<template>
  <div class="Page_DG_projectbug_cj">
    <button @click="btnHandler">aaaa</button>
    <t-mixed-view
      :ref="el => (Widget['mixedView'] = el)"
      style="opacity: 100%"
      class="dataGrid"
      :bordered_GridData="false"
      :enableCmdCol_GridData="true"
      :allowSort_GridData="true"
      :tabIndex="0"
      :enableQuickFilter="true"
      :filterFields_QuickFilter='filterFields'
      :quickItems_QuickFilter="quickItems"
      :quickItemSummary_QuickFilter="quickItemSummary"
      @init_QuickFilter="onInitHandler"
      @querySummary_QuickFilter="onQuerySummaryHandler"
      :optColumns="[
        {
          ID: 'ID',
          dataField: 'ID',
          caption: '主键ID',
          dataType: 'String',
          isShow: false,
          groupIndex: '',
          ExprExt: {},
          linkFormat: '',
          enumDisp: {},
          hintConf: {},
          expanded: true,
          RefSchemaExpr:
            'Schema.DQ.GetCDO_DO_do_projectbug_cj121801BasicList.Sources.DO_do_projectbug_cj121801.Columns.ID',
          ValueInfo_caption: {
            ShowValue: '主键ID',
            ReferenceExpr:
              'Schema.DQ.GetCDO_DO_do_projectbug_cj121801BasicList.Sources.DO_do_projectbug_cj121801.Columns.ID.Text',
            Type: 0,
          },
          ValueInfo_dataType: {
            ShowValue: 'String',
            ReferenceExpr:
              'Schema.DQ.GetCDO_DO_do_projectbug_cj121801BasicList.Sources.DO_do_projectbug_cj121801.Columns.ID.DataType',
            Type: 0,
          },
        },
        {
          ID: 'Code',
          dataField: 'Code',
          caption: '单据编号',
          dataType: 'String',
          isShow: true,
          groupIndex: '',
          ExprExt: {},
          linkFormat: '',
          enumDisp: {},
          hintConf: {},
          expanded: true,
          RefSchemaExpr:
            'Schema.DQ.GetCDO_DO_do_projectbug_cj121801BasicList.Sources.DO_do_projectbug_cj121801.Columns.Code',
          ValueInfo_caption: {
            ShowValue: '单据编号',
            ReferenceExpr:
              'Schema.DQ.GetCDO_DO_do_projectbug_cj121801BasicList.Sources.DO_do_projectbug_cj121801.Columns.Code.Text',
            Type: 0,
          },
          ValueInfo_dataType: {
            ShowValue: 'String',
            ReferenceExpr:
              'Schema.DQ.GetCDO_DO_do_projectbug_cj121801BasicList.Sources.DO_do_projectbug_cj121801.Columns.Code.DataType',
            Type: 0,
          },
        },
      ]"
      rowKey="ID"
      @click="(e)=>{alert(3)}"
      @row_click_GridData="(e)=>{alert(3)}"
      :rows_GridData="LocalVars.dataGrid_DataSource"
      :loading_GridData="LocalVars.dataGrid_Loading"
      :pageIndex_GridData="LocalVars.dataGrid_PageIndex"
      :pageSize_GridData="LocalVars.dataGrid_PageSize"
      :rowsNumber_GridData="LocalVars.dataGrid_Total"
      @request_GridData="dataGrid_Request"
      :optCmdColConfig_GridData="{
        columnConf: {
          width: 120,
          fixed: true,
          fixedPosition: 'left',
          caption: '操作',
          ValueInfo_caption:
            'Schema.Page.PageDGprojectbugcj.Controls.dataGrid.GridData.columnConf.caption',
        },
        commands: [],
      }"
      :cmdColClick_GridData="dataGrid_cmdColClick"
      :colCommandVisible_GridData="dataGrid_colCommandVisible"
    >
    </t-mixed-view>
  </div>
</template>

<script setup lang="ts">
  import {
    ref,
    onBeforeMount,
    onMounted,
    computed,
    onUnmounted,
    reactive,
    nextTick,
    watch,
} from 'vue';

import _ from 'lodash';

const btnHandler = () => {
  if (Widget['mixedView'].dataGridInstance.headers.length == 0) {
    Widget['mixedView'].dataGridInstance.headers = [{
      label: '数据类型',
      children: [
        {
          dataField: 'Code',
        }]
    }];
  } else {
    Widget['mixedView'].dataGridInstance.headers = [];
  }
}

  const refQuickFilter = ref(null);
    const quickItems = ref({});
    const quickItemSummary = ref({})

    const onInitHandler = () => {
      /**
       * 这里进行SDO数据的情况
       * 1.根据 refQuickFilter.value?.filterItemsIsSDO 数组批量请求SDO数据
       *  filterItemsIsSDO 的接口参考 filterFields里的值
       * 2.并将结果赋值给变量 quickItems 属性绑定的变量
       * 3. quickItems 的 结构
       * {
         "AAA": [ { "label": "隐藏", "value": "隐藏" }, { "label": "中文", "value": "CN" }, ...]
         "BBB": [ { "label": "隐藏", "value": "隐藏" }, { "label": "中文", "value": "CN" } ]
         ...
       * }
       */

      debugger;
      alert('onInitHandler');
       /** 示例代码 */
      quickItems.value = _.transform(
        filterFields.value?.filter(f => "sdo" == f.valueType),
        (result, f) => {
          result[f.fieldAlias] = [
            { label: '状态-0', value: '0' },
            { label: '状态-1', value: '1' },
            { label: '英文-2', value: '2' },
          ];
        },
        {},
      );
};

    function mockSummary() {

        let summary = Math.floor(Math.random() * 100);
        if (summary < 10) {
          summary = 0;
        }
        return summary;
    }

    const onQuerySummaryHandler = filterExpression => {
      alert('onQuerySummaryHandler');
      /** 统计数据
       * 调用绑定的数据源 进行 使用 入参 filterExpression 进行 DQ 查询
       * https://alidocs.dingtalk.com/i/nodes/14dA3GK8gkwY35ADTjvYgP3j89ekBD76?doc_type=wiki_doc&iframeQuery=utm_source%3Dportal%26utm_medium%3Dportal_recent&rnd=0.12017852477600766# 「快捷筛选组件设计」
       *
       * 返回的结构 赋值给 quickItemSummary 属性绑定的变量
      */

      console.log('onQuerySummaryHandler', filterExpression);
      quickItemSummary.value = [{ Total: mockSummary(), State: '0', State2: '0' },
        { Total: mockSummary(), State: '1', State2: '2' },
        { Total: mockSummary(), State: '2', State2: 'CN' },
        { Total: mockSummary(), State: 'CN', State2: 'CN' },
        { Total: mockSummary(), State: 'EN', State2: 'EN' },
        { Total: mockSummary(), State: 'EN', State2: 'EN' }]
    };

    const filterFields = ref([
      {
        "ID": "7a7842d3-1169-4c23-b7ac-b3856c6906c4",
        "tableAlias": "DO_do_projectbug_cj121801",
        "tableCode": "DO_do_projectbug_cj121801",
        "tableName": "do_projectbug_cj121801",
        "fieldCode": "State",
        "fieldName": "状态",
        "fieldAlias": "State",
        "displayType": "tab",
        "mockDataModel": "default",
        "isMultiple": true,
        "enableStatistics": true,
        "enableAllItem": true,
        "hideEmpty": true,
        "showTitle": false,
        "dataType": "Int",
        "valueType": "sdo",
        "filter_dataValue": "{\"DataBind\":\"DataQuery.GetSDO_statemachinetest_selectBasicList(DefaultInputFilter,PageIndex,PageSize,AdvancedFilter,AdvancedSort).List\",\"DataSource\":\"5030e87f-3250-4c3f-a839-bbf18630b57e\",\"ActionType\":3,\"RelatedCdoCode\":\"GetSDO_statemachinetest_selectBasicList\",\"ServicePara\":[{\"ID\":\"d149d54e-dce5-42ba-a845-e1b0526b63b1\",\"Code\":\"DefaultInputFilter\",\"Name\":\"模糊匹配参数\",\"DataType\":9,\"IsEmpty\":0,\"Value\":\"\"},{\"ID\":\"7462d708-6ee5-43cd-82ce-47cd37fb8bd8\",\"Code\":\"PageIndex\",\"Name\":\"页码\",\"DataType\":2,\"IsEmpty\":0,\"Value\":\"\"},{\"ID\":\"262e9b92-6a97-49f8-ae77-ae5c7d91737b\",\"Code\":\"PageSize\",\"Name\":\"分页大小\",\"DataType\":2,\"IsEmpty\":0,\"Value\":\"\"},{\"ID\":\"35fd7cf3-5fd7-4ac3-9e75-558222989dc1\",\"Code\":\"AdvancedFilter\",\"Name\":\"高级查询过滤条件\",\"DataType\":9,\"IsEmpty\":0,\"Value\":\"\"},{\"ID\":\"f47251eb-5371-4872-8350-f71a032e7d83\",\"Code\":\"AdvancedSort\",\"Name\":\"高级查询排序条件\",\"DataType\":9,\"IsEmpty\":0,\"Value\":\"\"}],\"isMultiple\":false,\"labelField\":\"Name\",\"valueField\":\"Code\",\"columns\":[{\"ID\":\"Code\",\"dataField\":\"Code\",\"caption\":\"编号\",\"dataType\":\"Int\"},{\"ID\":\"Name\",\"dataField\":\"Name\",\"caption\":\"名称\",\"dataType\":\"String\"}],\"ServiceParam\":[{\"ID\":\"d149d54e-dce5-42ba-a845-e1b0526b63b1\",\"Code\":\"DefaultInputFilter\",\"Name\":\"模糊匹配参数\",\"DataType\":9,\"IsEmpty\":0,\"Value\":\"\"},{\"ID\":\"7462d708-6ee5-43cd-82ce-47cd37fb8bd8\",\"Code\":\"PageIndex\",\"Name\":\"页码\",\"DataType\":2,\"IsEmpty\":0,\"Value\":\"\"},{\"ID\":\"262e9b92-6a97-49f8-ae77-ae5c7d91737b\",\"Code\":\"PageSize\",\"Name\":\"分页大小\",\"DataType\":2,\"IsEmpty\":0,\"Value\":\"\"},{\"ID\":\"35fd7cf3-5fd7-4ac3-9e75-558222989dc1\",\"Code\":\"AdvancedFilter\",\"Name\":\"高级查询过滤条件\",\"DataType\":9,\"IsEmpty\":0,\"Value\":\"\"},{\"ID\":\"f47251eb-5371-4872-8350-f71a032e7d83\",\"Code\":\"AdvancedSort\",\"Name\":\"高级查询排序条件\",\"DataType\":9,\"IsEmpty\":0,\"Value\":\"\"}]}"
      },
      {
        "ID": "7a7842d3-1169-4c23-b7ac-bool",
        "tableAlias": "DO_do_projectbug_cj121801",
        "tableCode": "DO_do_projectbug_cj121801",
        "tableName": "do_projectbug_cj121801",
        "fieldCode": "bool",
        "fieldName": "逻辑值",
        "fieldAlias": "bool",
        "displayType": "tab",
        "mockDataModel": "default",
        "isMultiple": false,
        "enableStatistics": false,
        "hideEmpty": false,
        "showTitle": false,
        "dataType": "Int",
        "valueType": "boolean",
        "filter_dataValue": ""
      },
      {
        "ID": "7a7842d3-1169-4c23-b7ac-bool",
        "tableAlias": "DO_do_projectbug_cj121801",
        "tableCode": "DO_do_projectbug_cj121801",
        "tableName": "do_projectbug_cj121801",
        "fieldCode": "date",
        "fieldName": "日期",
        "fieldAlias": "date",
        "displayType": "tab",
        "mockDataModel": "default",
        "isMultiple": false,
        "enableStatistics": false,
        "hideEmpty": false,
        "showTitle": false,
        "dataType": "Int",
        "valueType": "date",
        "filter_dataValue": ""
      },
      {
        "ID": "7a7842d3-1169-4c23-b7ac-b3856c6906c4",
        "tableAlias": "DO_do_projectbug_cj121801",
        "tableCode": "DO_do_projectbug_cj121801",
        "tableName": "do_projectbug_cj121801",
        "fieldCode": "State2",
        "fieldName": "状态2",
        "fieldAlias": "State2",
        "displayType": "tab",
        "mockDataModel": "default",
        "isMultiple": false,
        "enableStatistics": false,
        "hideEmpty": false,
        "showTitle": false,
        "dataType": "Int",
        "valueType": "sdo",
        "filter_dataValue": "{\"DataBind\":\"DataQuery.GetSDO_statemachinetest_selectBasicList(DefaultInputFilter,PageIndex,PageSize,AdvancedFilter,AdvancedSort).List\",\"DataSource\":\"5030e87f-3250-4c3f-a839-bbf18630b57e\",\"ActionType\":3,\"RelatedCdoCode\":\"GetSDO_statemachinetest_selectBasicList\",\"ServicePara\":[{\"ID\":\"d149d54e-dce5-42ba-a845-e1b0526b63b1\",\"Code\":\"DefaultInputFilter\",\"Name\":\"模糊匹配参数\",\"DataType\":9,\"IsEmpty\":0,\"Value\":\"\"},{\"ID\":\"7462d708-6ee5-43cd-82ce-47cd37fb8bd8\",\"Code\":\"PageIndex\",\"Name\":\"页码\",\"DataType\":2,\"IsEmpty\":0,\"Value\":\"\"},{\"ID\":\"262e9b92-6a97-49f8-ae77-ae5c7d91737b\",\"Code\":\"PageSize\",\"Name\":\"分页大小\",\"DataType\":2,\"IsEmpty\":0,\"Value\":\"\"},{\"ID\":\"35fd7cf3-5fd7-4ac3-9e75-558222989dc1\",\"Code\":\"AdvancedFilter\",\"Name\":\"高级查询过滤条件\",\"DataType\":9,\"IsEmpty\":0,\"Value\":\"\"},{\"ID\":\"f47251eb-5371-4872-8350-f71a032e7d83\",\"Code\":\"AdvancedSort\",\"Name\":\"高级查询排序条件\",\"DataType\":9,\"IsEmpty\":0,\"Value\":\"\"}],\"isMultiple\":false,\"labelField\":\"Name\",\"valueField\":\"Code\",\"columns\":[{\"ID\":\"Code\",\"dataField\":\"Code\",\"caption\":\"编号\",\"dataType\":\"Int\"},{\"ID\":\"Name\",\"dataField\":\"Name\",\"caption\":\"名称\",\"dataType\":\"String\"}],\"ServiceParam\":[{\"ID\":\"d149d54e-dce5-42ba-a845-e1b0526b63b1\",\"Code\":\"DefaultInputFilter\",\"Name\":\"模糊匹配参数\",\"DataType\":9,\"IsEmpty\":0,\"Value\":\"\"},{\"ID\":\"7462d708-6ee5-43cd-82ce-47cd37fb8bd8\",\"Code\":\"PageIndex\",\"Name\":\"页码\",\"DataType\":2,\"IsEmpty\":0,\"Value\":\"\"},{\"ID\":\"262e9b92-6a97-49f8-ae77-ae5c7d91737b\",\"Code\":\"PageSize\",\"Name\":\"分页大小\",\"DataType\":2,\"IsEmpty\":0,\"Value\":\"\"},{\"ID\":\"35fd7cf3-5fd7-4ac3-9e75-558222989dc1\",\"Code\":\"AdvancedFilter\",\"Name\":\"高级查询过滤条件\",\"DataType\":9,\"IsEmpty\":0,\"Value\":\"\"},{\"ID\":\"f47251eb-5371-4872-8350-f71a032e7d83\",\"Code\":\"AdvancedSort\",\"Name\":\"高级查询排序条件\",\"DataType\":9,\"IsEmpty\":0,\"Value\":\"\"}]}"
      }
    ])


  const Widget = {
    mixedView: null,
  };

  interface LocalVariable {}
  const LocalVars = reactive<LocalVariable>({
    dataGrid_DataSource: [],
    dataGrid_PageIndex: 1,
    dataGrid_PageSize: 10,
    dataGrid_Total: 100,
    dataGrid_Loading: false,
  });
  class CtrlMethods {}
  const CtrlMethod = new CtrlMethods();
  async function Page_OnLoaded(e) {}
  async function Page_OnLoading(e) {}
  async function Page_OnError(e) {
    Funcs.HandleError(e);
  }
// async function dataGrid_OnRowClick(e) {
//   debugger;
//     // Widget.mixedView.gridInstance
//     alert('row-click')
// }
const dd= async  (e)=> {
  debugger;
    // Widget.mixedView.gridInstance
    alert('row-33333')
  }
const dataGrid_OnRowClick= async  (e)=> {
  debugger;
    // Widget.mixedView.gridInstance
    alert('row-click')
  }

  function fetchFromServer(_pagination, filter) {
    debugger;
    const { page, rowsPerPage, sortBy, descending, rowsNumber } = _pagination;
    const fetchCount = rowsPerPage === 0 ? rowsNumber : rowsPerPage;

    // calculate starting row of data
    const startRow = (page - 1) * rowsPerPage;

    fetch(
      `http://localhost:3004/users?_start=${startRow}&_limit=${fetchCount}`,
    ).then(response => {
      response.json().then(movies => {
        // rows.value = movies;
        // clear out existing data and add new

        LocalVars.dataGrid_DataSource.splice(
          0,
          LocalVars.dataGrid_DataSource.length,
          ...movies,
        );
        LocalVars.dataGrid_Total = 2001;
        LocalVars.dataGrid_PageIndex = page;
        LocalVars.dataGrid_PageSize = rowsPerPage;
        LocalVars.dataGrid_Loading = false;
      });
    });
  }
  async function dataGrid_Request(props) {
    debugger;
    LocalVars.dataGrid_Loading = true;
    const { page, rowsPerPage, rowsNumber } = props.pagination;
    setTimeout(() => {
      fetchFromServer(props.pagination, props.filter);
    }, 1500);
  }
  async function dataGrid_cmdColClick(cmdCol) {
    let colClicks = {};
    colClicks[cmdCol.text]();
  }
  function dataGrid_colCommandVisible(cmdCol) {
    let colVisibles = {};
    return colVisibles[cmdCol.text]();
  }
  onBeforeMount(() => {
    Page_OnLoading();
  });
  onMounted(async () => {
    await nextTick();
    var props = {
      pagination: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 100,
      },
    };
    dataGrid_Request(props);

    Page_OnLoaded();
  });
  onMounted(async () => {});
</script>

<style>
  .tr-label-prefix-wraper .tr-label-prefix {
    width: 100px;
  }
</style>
